﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChangePwd.aspx.cs" Inherits="ProjectStudy.注册登录找回密码修改密码页面.ChangePwd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //------------------修改密码----------------------------------------------------------
            $("#chgOk").click(function () {
                $("#chgOldValid").css("display", "none");
                $("#chgNewPwdValid").css("display", "none");
                $("#chgConfirmNewPwdValid").css("display", "none");

                var oldPwd = $("#chgOldPwd").val();
                var newPwd = $("#chgNewPwd").val();
                var ComfirmNewPwd = $("#chgComfirmNewPwd").val();

                if (oldPwd.length == 0) {
                    $("#chgOldValid").css("display", "inherit");
                }
                if (newPwd.length == 0) {
                    $("#chgNewPwdValid").css("display", "inherit");
                }
                if (ComfirmNewPwd.length == 0) {
                    $("#chgConfirmNewPwdValid").html("*确认密码不得为空");
                    $("#chgConfirmNewPwdValid").css("display", "inherit");
                }
                if (ComfirmNewPwd != newPwd) {
                    $("#chgConfirmNewPwdValid").html("*两次密码不一致");
                    $("#chgConfirmNewPwdValid").css("display", "inherit");
                }
                if (oldPwd.length > 0 && newPwd.length > 0 && ComfirmNewPwd.length > 0 && newPwd == ComfirmNewPwd) {
                    $.ajax({
                        type: "post",
                        url: "/Ajax/RegisterLoginChangePwdFindPwd.ashx",
                        data: { "action": "changepwd", "oldpwd": oldPwd, "newpwd": newPwd },
                        dataType: "json",
                        success: function (data) {
                            if (data["status"] == "success") {
                                $.ajax({
                                    type: "post",
                                    url: "/Ajax/RegisterLoginChangePwdFindPwd.ashx",
                                    data: { "action": "logout" },
                                    dataType: "json",
                                    success: function (data) {
                                    },
                                    error: function (err) { }
                                });
                                alert("密码修改成功，请重新登陆");
                                top.location.href = "Login.aspx";
                            }
                            if (data["status"] == "oldPwdErr") {
                                alert("原密码错误");
                            }
                            if (data["status"] == "sesionErr") {
                                alert("Session过期，请重新登陆");
                                location.href = "菜单.aspx";

                            }
                        },
                        error: function () { }
                    });
                }

            });

            $("#chgOldPwd").focus(function () {
                $("#chgOldValid").css("display", "none");
            });
            $("#chgNewPwd").focus(function () {
                $("#chgNewPwdValid").css("display", "none");
            });
            $("#chgComfirmNewPwd").focus(function () {
                $("#chgConfirmNewPwdValid").css("display", "none");
            });

            $("#chgClear").click(function () {
                $("#chgOldValid").css("display", "none");
                $("#chgNewPwdValid").css("display", "none");
                $("#chgConfirmNewPwdValid").css("display", "none");
                $("#chgOldPwd").val("");
                $("#chgNewPwd").val("");
                $("#chgComfirmNewPwd").val("");

                $('#level').removeClass('pw-weak');
                $('#level').removeClass('pw-medium');
                $('#level').removeClass('pw-strong');
                $('#level').addClass(' pw-defule');
                //密码小于六位的时候，密码强度图片都为灰色

            });

            //密码强度检测
            $('#chgNewPwd').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色 
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
                }
                else {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
                }
                return true;
            });

            //------------------修改密码----------------------------------------------------------
        });
    </script>
    <%--密码强度样式--%>
<style type="text/css"> 
/*密码强度*/
.pw-strength {clear: both;position: relative;top: 8px;width: 170px;}
.pw-bar{background: url(/images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url(/images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" margin:0 auto;">
    <table style=" margin:100px auto;">
      <tr style=" height:30px;">
        <td><label>原密码：</label></td>
        <td><input  type="password" id="chgOldPwd"  style=" width:175px"/></td>
        <td style=" width:150px"><label id="chgOldValid" style=" color:Red; display:none;">*原密码不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>新密码：</label></td>
        <td><input  type="password" id="chgNewPwd" style=" width:175px"/></td>
        <td><label id="chgNewPwdValid" style=" color:Red; display:none;">*新密码不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>确认新密码：</label></td>
        <td><input  type="password" id="chgComfirmNewPwd" style=" width:175px"/></td>
        <td><label id="chgConfirmNewPwdValid" style=" color:Red; display:none;">*两次密码不一致</label></td>
      </tr>
      <tr>
            <th>
                <br />
            </th>
            <td id="level" class="pw-strength">
                <div class="pw-bar">
                </div>
                <div class="pw-bar-on">
                </div>
                <div class="pw-txt">
                    <span>弱</span> <span>中</span> <span>强</span>
                </div>
            </td>
        </tr>
      <tr></tr>
      <tr style=" height:50px">
        <td></td>
        <td>&nbsp; <input  type="button" id="chgOk" value="修改"/>&nbsp; <input  type="button" id="chgClear" value="清除"/></td>
      </tr>
    </table>
    </div>
    </form>
</body>
</html>
